<template>
  <div class="container">
    <div class="table-data">
      <el-card class="box-card">
        <el-row style="margin-bottom:20px;">
          <el-col :span="10">
            <!-- 刷新 -->
            <el-button
              type="success"
              icon="el-icon-plus"
              size="small"
              @click="addGoods"
              >新增</el-button
            >

            <!-- 编辑 -->
            <!-- <el-button type="primary" icon="el-icon-edit" size="small" >修改</el-button> -->

            <!-- 删除 -->
            <!-- <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button> -->
          </el-col>

          <!-- <el-col :span="4" :offset="10">
                <el-input placeholder="请输入内容" v-model="pageObj.search" clearable @clear="getShopList">
                    <template slot="append">
                    <el-button slot="append" icon="el-icon-search" @click="getShopList"></el-button>
                    </template>
                </el-input>
                </el-col> -->
        </el-row>

        <el-table :data="dataShow" stripe border style="width: 100%">
          <el-table-column type="index"> </el-table-column>
          <el-table-column prop="good_name" label="商品名称"></el-table-column>
          <el-table-column prop="img" label="封面">
            <template slot-scope="scope">
              <img :src="scope.row.img" width="100px" style="height:100px" />
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            :formatter="formatter"
          ></el-table-column>
          <el-table-column
            prop="update_time"
            label="更新时间"
            :formatter="formatter"
          ></el-table-column>
          <el-table-column label="禁用/启用" width="200">
            <template slot-scope="scope">
              <el-switch
                style="display: block"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="禁用"
                @change="changestaus(scope.row.good_id)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="editGoods(scope.row.good_id)"
                >修改</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="delShop(scope.row.good_id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageObj.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageObj.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataShow: [],
      total: 1,
      pageObj: {
        token: window.sessionStorage.getItem("token"),
        page: 1,
        size: 5,
        search: ""
      },
      //修改详情上传
      resForm: {},
      editForm: {
        token: window.sessionStorage.getItem("token"),
        good_name: "",
        type_id: null,
        type_parent_id: null,
        price: null,
        img: "",
        imgs: [], // 图片的数组
        info: "",
        // is_new:null,
        goods_weight: null,
        colour: {},
        edition: [
          {
            optional: {},
            generated: { pic: "", price: "" },
            inventory: ""
          }
        ],
        good_id: ""
      }
    };
  },
  created() {
    this.getShopList();
  },
  methods: {
    async getShopList() {
      const { data: res } = await this.$http.post(
        "/api/admin/goodList",
        this.pageObj
      );

      this.dataShow = res.data.data;
      this.dataShow = this.dataShow.map(item => {
                if (item.status == 1) {
                  item.status = true;
                } else {
                  item.status = false;
                }
                return item;
      });
      this.total = res.data.count;
    },
    //处理时间戳
    formatter(row, column, cellValue, index) {
      if (cellValue == null || cellValue == "") return "";
      let date = new Date(parseInt(cellValue) * 1000);
      let Y = date.getFullYear() + "-";
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      let D =
        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
      let h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":";
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageObj.size = val;
      this.getShopList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageObj.page = val;
      this.getShopList();
    },
    async changestaus(id) {
      const { data: res } = await this.$http.post("/api/admin/banGood", {
        token: window.sessionStorage.getItem("token"),
         good_id: id
      });
    },
    //删除
    async delShop(id) {
      const confirmRes = await this.$confirm(
        "此操作将永久删除该条商品信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(error => error);

      if (confirmRes !== "confirm") {
        return this.$message.info("已取消删除！");
      }
      const { data: res } = await this.$http.post("/api/admin/deleteGood", {
        token: window.sessionStorage.getItem("token"),
        good_id: id
      });

      if (res.code !== 2000) return this.$message.error("删除失败!");
      this.$message.success("删除成功!");

      const { data: shoplist } = await this.$http.post(
        "/api/admin/goodList",
        this.pageObj
      );
      //判断删除当前页后为空数据
      if (shoplist.data.data.data == "") {
        this.pageObj.page -= 1;
      }
      this.getShopList();
    },
    //添加
    addGoods() {
      this.$router.push("/addgoods");
    },
    //修改
    editGoods(id) {
      console.log(id+' 238行');
      this.$router.push({
        path: "/editgoods",
        query: { id }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-table__body-wrapper {
  font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data {
    padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 80px !important;
  }
  /deep/.el-input {
    width: 98%;
  }
}
</style>
